<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .summer-header i {
            color: #fff;
        }

        .el-menu-top-right > .el-menu-item, .el-menu-top-right > .el-submenu {
            float: right;
        }

        .el-tab-pane {
            height: 100%;
            width: 100%;
        }

        .summer-main {
            padding: 0;
        }

        .summer-main > .el-tabs, .summer-main > .el-tabs > .el-tabs__content {
            height: calc(100% - 30px);
        }

        .el-tab-pane iframe {
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>
<div id="app">

    <el-container style="height: 100%">
        <el-header class="summer-header" style="padding: 0">

            <el-row>
                <el-col :span="18">
                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#1890ff"
                            text-color="#fff"
                            active-text-color="#f6f6f6">
                        <el-menu-item style="width: 200px; text-align: center">MALL <i class="el-icon-s-operation"
                                                                                       @click="isCollapse=!isCollapse"></i>
                        </el-menu-item>
                        <el-menu-item @click="openUrl('http://www.jc001.cn', '处理中心')">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item>选项1</el-menu-item>
                            <el-menu-item>选项2</el-menu-item>
                            <el-menu-item>选项3</el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-col>
                <el-col :span="6">
                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-top-right"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#1890ff"
                            text-color="#fff"
                            active-text-color="#f6f6f6">
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-s-tools"></i>超级管理员</template>
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                            <el-menu-item index="2-2">密码修改</el-menu-item>
                            <el-menu-item index="2-3">退出登录</el-menu-item>
                        </el-submenu>
                        <el-menu-item><i class="el-icon-message-solid"></i>消息</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>

        </el-header>
        <el-container style="height: 100%">
            <el-aside :width="isCollapse ? '66px': '200px'" style="height: 100%">
                <el-menu
                        style="height: 100%"
                        :collapse="isCollapse"
                        default-active="2"
                        class="el-menu-vertical-demo"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="summer-main">
                <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
                    <el-tab-pane
                            :key="item.name"
                            v-for="(item, index) in editableTabs"
                            :label="item.title"
                            :name="item.name"
                            stlye="height:100%"
                    >
                        <iframe :id="item.name" :src="item.url" frameborder="0"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                isCollapse: false,
                activeIndex2: '1',

                editableTabsValue: '0',
                editableTabs: [{
                    title: 'Tab 1',
                    name: '0',
                    url: 'http://www.baidu.com'
                }],
                tabIndex: 2
            }
        },
        methods: {
            openUrl(url, name) {
                this.editableTabsValue = '' + this.editableTabs.length;
                this.editableTabs.push({name: this.editableTabsValue, title: name, url: url})

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleTabsEdit(targetName, action) {
                console.log(action)
                if (this.editableTabs.length < 1) {
                    return false;
                }
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            }
        }
    })
</script>
</html>